<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 658px;
            height: 400px;
            border: 1px solid rebeccapurple;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        #box img {
            position: absolute;
            width: 658px;
            left: 0;
        }

        #box span {
            position: absolute;
            width: 100%;
            height: 50%;
            left: 0;
            cursor: pointer;
        }

        #box #top {
            top: 0;
        }

        #box #bom {
            bottom: 0;
        }

    </style>
</head>
<body>
<div id="box">
    <img src="img/imgmian.jpg">
    <span id="top"></span>
    <span id="bom"></span>

</div>
<script>
    var img = document.getElementsByTagName('img')[0];
    var ss = 0;
    //4910-400
    var time = null;

    $('top').onmousemove = function () {
        clearInterval(time);

        time = setInterval(function () {

            ss -= 30;
            if (ss >= -3900) {
                img.style.top = ss + "px";
            } else {
                clearInterval(time);
            }

        }, 90);

    }
    $('bom').onmousemove = function () {
        clearInterval(time);

        time = setInterval(function () {
            ss += 30;
            if (ss <= 0) {
                img.style.top = ss + "px";

            } else {
                clearInterval(time);

            }
        }, 100)

    }
    $('box').onmouseout = function () {
        clearInterval(time);
    }

    function $(element) {
        return element === null ? null : document.getElementById(element);
    }
</script>
</body>
</html>